/**
 * Created by msi on 2017/12/5 0005.
 */


import React from "react";
import {Card, Col, Row, Icon, Switch, Radio, Button, Slider, Tabs, message, notification} from "antd";
import  Flox from "../../Flox/Flox.js"
import GUI from "../../Flox/GUI.js"
import Model from "../../Flox/FloxModel"
import MapComponent_d3 from "../../Flox/MapComponent_d3"

import '../../style/d3MapStyle.css';
import '../../style/floxStyle.css';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const ButtonGroup = Button.Group;

const TabPane = Tabs.TabPane;

const openNotificationWithIcon = (type, message, description) => {
    notification[type]({
        message: message,
        description: description,
    });
};

function countyClick() {
    if (Flox.getSelectedCounty() !== false) {
        console.log("A county is selected: " + Flox.getSelectedCounty());
        // Import the county-to-county data for that state again. No
        // need to go all zoomy.
        Flox.setSelectedCounty(false);
        Flox.selectState(Flox.getSelectedState());
        return;
    }

    if (Flox.isCountyMode()) {
        // It's in county mode. So get it out of county mode! And
        // into state mode, but showing only flows for the selected
        // state
        Flox.setCountyMode(false);
        Flox.setStateMode(true);

        // The button will show what happens when you click it. It
        // will turn back to county mode, so show the counies icon

        Flox.importStateToStateMigrationFlows(true);
        return;
    } else if (Flox.isCountyMode() === false) {
        // It's not in county mode. Put it in county mode!
        Flox.setCountyMode(true);
        Flox.setStateMode(false);

        // The button will show what happens when you click it. It
        // will turn back to county mode, so show the counies icon

        // if a state is selected, show the county flows in that state.
        if (Flox.getSelectedState() !== false) {
            // This is weird. A state should already be selected here.
            // But this initiates the zoom thing though. Which is nice.
            Flox.selectState(Flox.getSelectedState());

        } else {
            // need to change the color of the states to gray...
            // No layout will occur. This is kindof a special case.
            //Flox.enterClickAStateMode();
        }
        return;
    }
}

function netFlows() {
    if (Flox.getFlowType() !== "net") {
        Flox.setFlowType("net");
    }
    Flox.updateMap();
}

function outgoingFlows() {
    if (Flox.getFlowType() !== "outgoing") {
        Flox.setFlowType("outgoing");
    }

    // Only updateMap if a state or county is selected
    // if (Flox.getSelectedState() !== false && Flox.isStateMode()) {
    //     Flox.updateMap();
    // } else if (Flox.getSelectedCounty() !== false && Flox.isCountyMode()) {
    //     Flox.updateMap();
    // }
    // else {
    //     openNotificationWithIcon('warning', "警告", "请选择一个行政单区");
    // }

    if (Flox.getSelectedState() !== false || Flox.getSelectedCounty() !== false) {
        Flox.updateMap();
    }
    else {
        openNotificationWithIcon('warning', "警告", "请选择一个行政单区");
    }
}
function incomingFlows() {
    if (Flox.getFlowType() !== "incoming") {
        Flox.setFlowType("incoming");
    }
    // Only updateMap if a state or county is selected
    // if (Flox.getSelectedState() !== false && Flox.isStateMode()) {
    //     Flox.updateMap();
    // } else if (Flox.getSelectedCounty() !== false && Flox.isCountyMode()) {
    //     Flox.updateMap();
    // }
    // else {
    //     openNotificationWithIcon('warning', "警告", "请选择一个行政单区");
    // }

    if (Flox.getSelectedState() !== false || Flox.getSelectedCounty() !== false) {
        Flox.updateMap();
    }
    else {
        openNotificationWithIcon('warning', "警告", "请选择一个行政单区");
    }
}
function totalFlows() {
    if (Flox.getFlowType() !== "total") {
        Flox.setFlowType("total");
    }
    Flox.updateMap();
}
class ODMap extends React.Component {
    componentDidMount() {
        Flox.initFlox();
    }

    state = {
        inputValue: 0,
    }
    onSliderChange = (value) => {
        this.setState({
            inputValue: parseInt(value),
            // inputValue: (value),
        });
        Flox.gapminderGraphic.displayYear(value);
    }

    onChange(e) {
        switch (e.target.value) {
            case "O-D":
                netFlows();
                break;
            case "O":
                outgoingFlows();
                break;
            case "D":
                incomingFlows();
                break;
            case "O+D":
                totalFlows();
                break;
        }
    }


    onSortChange(e) {
        switch (e.target.value) {
            case "ODValue":
                Flox.sort = "ODValue";
                Flox.matrixGraphic.reSort("ODValue")
                break;
            case "ODDistance":
                Flox.sort = "ODDistance";
                Flox.matrixGraphic.reSort("ODDistance")
                break;
        }
    }

    callback(key) {
        switch (key) {
            case "1":
                if (Flox.newFlows) {
                    Flox.matrixGraphic.drawMatrixGraphic(Flox.newFlows);
                }
                break;
            case "2":
                if (Flox.newFlows) {
                    Flox.gapminderGraphic.drawGapminderGraphic(Flox.newFlows);
                }
                break;
            case "3":
                if (Flox.newFlows) {
                    Flox.chordDiagram.drawChordDiagram(Flox.newFlows);
                }
                break;
        }
    }

    render() {
        return (
            <div>
                <Row gutter={16} style={{top: "10px"}}>
                    <Col span={16}>
                        <Card title="地图展示">
                            <div>
                                <Switch style={{position: "relative", bottom: "10px"}} checkedChildren="行政区"
                                        unCheckedChildren="  街道" defaultChecked onChange={
                                    function () {
                                        countyClick();
                                    }
                                }/>

                                <RadioGroup onChange={this.onChange}
                                            style={{position: "relative", left: "10px", bottom: "10px"}}
                                            defaultValue="O-D">
                                    <RadioButton value="O-D">O-D</RadioButton>
                                    <RadioButton value="O">O</RadioButton>
                                    <RadioButton value="D">D</RadioButton>
                                    <RadioButton value="O+D">O+D</RadioButton>
                                </RadioGroup>
                            </div>
                            <div id="map"
                                 style={{width: "100%", height: "700px", margin: "0px", position: "relative"}}>
                                <div id="mapLegend" style={{
                                    position: "absolute",
                                    width: "220px",
                                    height: "auto",
                                    bottom: "0",
                                    right: "0",
                                    padding: "5px",
                                    background: "#b9a4a442"
                                }}></div>
                            </div>

                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card title="信息图表" bordered={false}>

                            <Tabs defaultActiveKey="1" onChange={this.callback}>
                                <TabPane tab="24小时热点图" key="1" forceRender={true}>

                                    <RadioGroup
                                        onChange={this.onSortChange}
                                        style={{
                                            position: "relative",
                                            left: "10px",
                                            bottom: "10px"
                                        }}
                                        defaultValue="ODValue">
                                        <RadioButton value="ODValue">OD值排序</RadioButton>
                                        <RadioButton value="ODDistance">OD距离排序</RadioButton>
                                    </RadioGroup>
                                    <div id="matrixGraphicegend"></div>
                                    <div id="matrixGraphic"
                                         style={{
                                             width: "100%",
                                             height: "600px",
                                             margin: "0px",
                                             "overflow-y": "scroll",
                                             "overflow-x": "scroll"
                                         }}></div>
                                </TabPane>
                                <TabPane tab="GapMinder散点图" key="2" forceRender={true}>
                                    <div style={{margin: "5px"}}>
                                        <Slider min={0} max={23} step={0.1}
                                                onChange={this.onSliderChange}
                                                value={this.state.inputValue}/>
                                    </div>

                                    <div id="gapminderGraphic"
                                         style={{
                                             width: "100%",
                                             height: "600px",
                                             margin: "0px",
                                             "overflow-y": "scroll",
                                             "overflow-x": "scroll"
                                         }}></div>
                                </TabPane>
                                <TabPane tab="弦图" key="3" forceRender={true}>
                                    <div id="chordDiagram"
                                         style={{
                                             width: "100%",
                                             height: "600px",
                                             margin: "0px",
                                             "overflow-y": "scroll",
                                             "overflow-x": "scroll"
                                         }}></div>
                                </TabPane>
                            </Tabs>


                        </Card>
                    </Col>
                </Row>


            </div>
        )
    }
}

export default ODMap;